<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<meta name = "format-detection" content = "telephone=no,email=no,address=no,date=no,url=no"/>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/FontSize.js"></script>
	<title>登录</title>
</head>
<body>
	<div class="Login">
    <img src="img/kv.png" class="login_bg"/>
    <ul class="form_box">
      <li>
        <input type="text" placeholder="输入手机号码" id="phone_input">
      </li>
      <li>
        <input type="text" placeholder="输入验证码"  id="code_input">
        <div class="code_btn" id="code_btn"></div>
      </li>
      <a href="javascript:;" class="Loginsub_btn" id="Loginsub_btn">登 录</a>
    </ul>
  </div>
</body>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/layer/layer.js"></script>
<script>
	$(function () {
    const phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    const phoneErr = '请正确填写手机号！'
    const codeErr = '请正确填写验证码！'
    const CODE_initTxt = '获取验证码'
    const CODE_initTime = 60
    const codeEle = $('#code_btn').html(CODE_initTxt)
    let CODE_time = CODE_initTime
    let CODE_Time = null


    codeEle.on('click',function (){
      if(!(phoneReg.test($('#phone_input').val()))){
        layer.msg(phoneErr)
        return false;
      }
      if (CODE_time !== CODE_initTime) {
        return
      }
      // AJAX 。。。 发送验证码 调用 codeTime
      codeTime()
    })

    function codeTime() {
      codeEle.html(`${CODE_time} 秒`)
      CODE_Time = setInterval(() => {
        CODE_time--
        codeEle.html(`${CODE_time} 秒`)
        if (CODE_time <= 0) {
          CODE_time = CODE_initTime
          codeEle.html(CODE_initTxt)
          clearInterval(CODE_Time)
        }
      }, 1000)
    }


    // 登录
    $('#Loginsub_btn').on('click', function (){
      if(!(phoneReg.test($('#phone_input').val()))){
        layer.msg(phoneErr)
        return false;
      }
      if($('#code_input').val().length < 6){
        layer.msg(codeErr)
        return false;
      }
      //
      // AJAX 提交登录 。。。
      layer.msg('登陆成功')
    })
	})
</script>
</html>
